<div>
  <div class="demo-container">
    <div class="demo-example">
      <div class="demo-title">基本用法</div>
      <div class="demo-text">
      </div>
      <d-codebox id="tree-select-basic" [sourceData]="TreeSelectDemoBasicComponent">
        <d-tree-select-basic demo></d-tree-select-basic>
      </d-codebox>
    </div>
    <div class="demo-example">
      <div class="demo-title">仅叶节点可选</div>
      <div class="demo-text">
      </div>
      <d-codebox id="tree-select-leaf-only" [sourceData]="TreeSelectDemoLeafOnlyComponent">
        <d-tree-select-leaf-only demo></d-tree-select-leaf-only>
      </d-codebox>
    </div>
    <div class="demo-example">
      <div class="demo-title">初始化完成时调用的钩子</div>
      <div class="demo-text">
      </div>
      <d-codebox id="tree-select-hooks" [sourceData]="TreeSelectDemoHooksComponent">
        <d-tree-select-hooks demo></d-tree-select-hooks>
      </d-codebox>
    </div>
    <div class="demo-example">
      <div class="demo-title">可简易搜索树</div>
      <div class="demo-text">
      </div>
      <d-codebox id="tree-select-searchable" [sourceData]="TreeSelectDemoSearchableComponent">
        <d-tree-select-searchable demo></d-tree-select-searchable>
      </d-codebox>
    </div>
    <div class="demo-example">
      <div class="demo-title">Append To Element 能力</div>
      <div class="demo-text">
      </div>
      <d-codebox id="tree-select-append-to" [sourceData]="TreeSelectDemoAppendToComponent">
        <d-tree-select-append-to demo></d-tree-select-append-to>
      </d-codebox>
    </div>
    <div class="demo-example">
      <div class="demo-title">自定义icon能力</div>
      <div class="demo-text">
      </div>
      <d-codebox id="tree-select-custom-icon" [sourceData]="TreeSelectDemoCustomIconComponent">
        <d-tree-select-custom-icon demo></d-tree-select-custom-icon>
      </d-codebox>
    </div>
  </div>
</div>
